/*
 *@description:个人信息页面
 *@Author:@reynold
 *@Date:2025-03-22 11:08:58
 *@Update:2025-03-22 11:08:58
 *@Version: V1.0.0
*/
<template>
  <div class="personal-info-container">
    <Card>
      <div class="info-section">
        <!-- 头像部分 -->
        <div class="avatar-section">
          <img :src="avatarUrl" alt="Avatar" class="avatar">
          <el-button @click="openAvatarUploader" type="primary" size="small">换头像</el-button>
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <input type="file" ref="avatarInput" style="display: none" @change="handleFileChange">
          </el-upload>
        </div>
        <!-- 账户余额部分 -->
        <div class="balance-section">
          <h3>账户余额</h3>
          <p>{{ accountBalance }} 元</p>
          <el-input v-model="rechargeAmount" placeholder="输入充值金额"></el-input>
          <el-button @click="recharge" type="primary" size="small">充值</el-button>
        </div>
        <!-- 订单地址部分 -->
        <div class="address-section">
          <h3>订单地址</h3>
          <el-input v-model="newAddress" placeholder="请输入新的订单地址"></el-input>
          <el-button @click="addAddress" type="primary" size="small">添加地址</el-button>
          <div v-if="addressList.length > 0" class="address-list">
            <div v-for="(address, index) in addressList" :key="index" class="address-item">
              <span>{{ address }}</span>
              <el-button @click="editAddress(index)" type="text" size="small">修改</el-button>
              <el-button @click="deleteAddress(index)" type="text" size="small" style="color: red">删除</el-button>
            </div>
          </div>
        </div>
        <!-- 个人信息部分 -->
        <div class="personal-data-section">
          <h3>个人信息</h3>
          <el-form :model="personalInfo" :rules="rules" ref="personalInfoForm">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="personalInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="personalInfo.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="personalInfo.email"></el-input>
            </el-form-item>
            <el-button @click="savePersonalInfo" type="primary" size="small">保存信息</el-button>
          </el-form>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card/index.vue'
import utils from '@/utils/utils.js'

export default {
  components: {
    Card
  },
  data() {
    return {
      avatarUrl: 'https://dummyimage.com/100x100/000/fff', // 初始头像占位图
      accountBalance: 100,
      rechargeAmount: '',
      newAddress: '',
      addressList: ['北京市朝阳区XX路XX号'],
      personalInfo: {
        name: '张三',
        phone: '13800138000',
        email: 'zhangsan@example.com'
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { pattern: /^1[3 - 9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ]
      },
      editingIndex: -1
    }
  },
  methods: {
    openAvatarUploader() {
      this.$refs.avatarInput.click()
    },
    handleFileChange(event) {
      const file = event.target.files[0]
      if (file) {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.avatarUrl = e.target.result
        }
        reader.readAsDataURL(file)
      }
    },
    handleAvatarSuccess(response, file, fileList) {
      // 这里可以处理上传成功后的逻辑，比如更新头像URL
      console.log('头像上传成功', response)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJPG) {
        this.$message.error('只能上传 JPG/PNG 格式的图片！')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB！')
      }
      return isJPG && isLt2M
    },
    recharge() {
      const amount = parseFloat(this.rechargeAmount)
      if (isNaN(amount) || amount <= 0) {
        this.$message.error('请输入有效的充值金额！')
        return
      }
      this.accountBalance += amount
      this.rechargeAmount = ''
      utils.showSuccess('充值成功')
    },
    addAddress() {
      if (this.newAddress) {
        this.addressList.push(this.newAddress)
        this.newAddress = ''
        this.$message.success('地址添加成功')
      } else {
        this.$message.error('请输入有效的地址')
      }
    },
    editAddress(index) {
      this.editingIndex = index
      this.newAddress = this.addressList[index]
    },
    saveEditedAddress() {
      if (this.newAddress && this.editingIndex!== -1) {
        this.addressList[this.editingIndex] = this.newAddress
        this.newAddress = ''
        this.editingIndex = -1
        this.$message.success('地址修改成功')
      } else {
        this.$message.error('请输入有效的地址')
      }
    },
    deleteAddress(index) {
      this.$confirm('确定要删除该地址吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.addressList.splice(index, 1)
        this.$message.success('地址删除成功')
      }).catch(() => {
        // 用户取消操作
      })
    },
    savePersonalInfo() {
      this.$refs.personalInfoForm.validate((valid) => {
        if (valid) {
          // 这里可以添加保存个人信息到后端的逻辑
          this.$message.success('个人信息保存成功')
        } else {
          this.$message.error('请完善个人信息！')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.personal-info-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.info-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.avatar-section {
  text-align: center;
  width: 100%;
  margin-bottom: 20px;

  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 10px;
    object-fit: cover;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  }
}

.balance-section,
.address-section,
.personal-data-section {
  flex: 1;
  min-width: 300px;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
}

h3 {
  margin-bottom: 10px;
  color: #333;
  font-size: 18px;
}

.el-input {
  margin-bottom: 10px;
}

.address-list {
  margin-top: 10px;
}

.address-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;

  &:last-child {
    border-bottom: none;
  }
}
</style>       